﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="chartCanvas" width="1000" height="750" style="position: fixed; left: 0px; top: 0px;"/>
<br />&nbsp;&nbsp;&nbsp;
    <input type="text" style="width:500px;height:22px;" id="txtBarrage" />
    <input type="button" value="发送弹幕" style="width:100px;height:25px;" id="btnBarrage" onclick="javascript:sendBarrage();" />
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasChart = document.getElementById("chartCanvas"); //绘图区域
        canvasChart.width = window.innerWidth;
        canvasChart.height = window.innerHeight;
        let paintChart = new FCPaint(); //绘图对象
        paintChart.canvas = canvasChart;
        scaleCanvas(paintChart);
        
        paintChart.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintChart.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasChart, paintChart);
        //判断是否移动端
        paintChart.isMobile = isMobileMode();
        if (paintChart.isMobile) {
            paintChart.scaleFactorX = 2.5;
            paintChart.scaleFactorY = 2.5;
        }
        let canvasSizeChart = new FCSize((canvasChart.width / paintChart.ratio / paintChart.scaleFactorX), (canvasChart.height / paintChart.ratio / paintChart.scaleFactorY));

        let showDemoTool_Chart = true; //是否显示Demo工具

        //K线视图
        let chart = new FCChart();
        chart.plotPointSizeChart = 15;
        addView(chart, paintChart);
        chart.backColor = "rgb(0,0,0)";
        chart.borderColor = "rgb(100,100,100)";
        chart.textColor = "rgb(255,255,255)";
        chart.location = new FCPoint(0, 0);
        if (showDemoTool_Chart) {
            chart.size = new FCSize(canvasSizeChart.cx, canvasSizeChart.cy - 120);
        } else {
            chart.size = new FCSize(canvasSizeChart.cx, canvasSizeChart.cy);
        }
        chart.visible = true;
        chart.leftVScaleWidth = 70;
        chart.rightVScaleWidth = 70;
        chart.vScaleDistance = 35;
        chart.hScalePixel = 11;
        chart.hScaleHeight = 35;
        chart.candlePaddingTop = 30;
        chart.candlePaddingBottom = 20;
        chart.volPaddingTop = 20;
        chart.volPaddingBottom = 0;
        chart.indPaddingTop = 20;
        chart.indPaddingBottom = 20;
        chart.vScaleDistance = 35;
        chart.cycle = "second";
        chart.font = "Default,12";
        chart.mainIndicator = "MA";
        chart.showIndicator = "BIAS";

        if (showDemoTool_Chart) {
            //指标集合
            let indicators = new Array();
            indicators.push("MA");
            indicators.push("BOLL");
            indicators.push("MACD");
            indicators.push("KDJ");
            indicators.push("BIAS");
            indicators.push("BBI");
            indicators.push("RSI");
            indicators.push("ROC");
            indicators.push("WR");
            indicators.push("DMA");
            indicators.push("TRIX");
            indicators.push("CCI");
            let iLeft = 0;
            for (let i = 0; i < indicators.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 120);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = indicators[i];
                button.font = "Default,12";
                button.viewName = "Indicator";
                addView(button, paintChart);
                iLeft += 80;
            }

            //画线集合
            let plots = new Array();
            iLeft = 0;
            plots.push("Line");
            plots.push("Segment");
            plots.push("Ray");
            plots.push("Triangle");
            plots.push("Rect");
            plots.push("Cycle");
            plots.push("CircumCycle");
            plots.push("Ellipse");
            plots.push("AngleLine");
            plots.push("LRLine");
            plots.push("LRChannel");
            plots.push("SymmetricTriangle");
            let plotNames = new Array();
            plotNames.push("直线");
            plotNames.push("线段");
            plotNames.push("射线");
            plotNames.push("三角形");
            plotNames.push("矩形");
            plotNames.push("圆");
            plotNames.push("外接圆");
            plotNames.push("椭圆");
            plotNames.push("角度线");
            plotNames.push("线性回归");
            plotNames.push("线性回归通道");
            plotNames.push("对称三角形");
            for (let i = 0; i < plots.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 90);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = plotNames[i];
                button.tag = plots[i];
                button.font = "Default,12";
                button.viewName = "Plot";
                addView(button, paintChart);
                iLeft += 80;
            }

            let plots2 = new Array();
            iLeft = 0;
            plots2.push("LRBand");
            plots2.push("ParalleGram");
            plots2.push("SpeedResist");
            plots2.push("FiboFanline");
            plots2.push("FiboTimezone");
            plots2.push("Percent");
            plots2.push("BoxLine");
            plots2.push("TironeLevels");
            plots2.push("QuadrantLines");
            plots2.push("Parallel");
            plots2.push("GoldenRatio");
            plots2.push("ArrowSegment");
            let plotNames2 = new Array();
            plotNames2.push("线性回归带");
            plotNames2.push("平行四边形");
            plotNames2.push("速阻线");
            plotNames2.push("斐波扇面");
            plotNames2.push("斐波周期线");
            plotNames2.push("百分比线");
            plotNames2.push("箱型线");
            plotNames2.push("泰龙水平线");
            plotNames2.push("四等分线");
            plotNames2.push("平行线");
            plotNames2.push("黄金分割线");
            plotNames2.push("箭头线段");
            for (let i = 0; i < plots2.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 60);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = plotNames2[i];
                button.tag = plots2[i];
                button.font = "Default,12";
                button.viewName = "Plot";
                addView(button, paintChart);
                iLeft += 80;
            }

            iLeft = 0;
            let functions = new Array();
            functions.push("白色");
            functions.push("黑色");
            functions.push("标准坐标");
            functions.push("对数坐标");
            functions.push("清除画线");
            functions.push("切换到最近");
            functions.push("分时线");
            functions.push("1分钟线");
            functions.push("日线");
            functions.push("秒线");
            functions.push("TICK图");
            for (let i = 0; i < functions.length; i++) {
                let button = new FCView;
                button.backColor = "rgb(255,255,255)";
                button.textColor = "rgb(0,0,0)";
                button.borderColor = "rgb(0,0,0)";
                button.location = new FCPoint(iLeft, canvasSizeChart.cy - 30);
                button.size = new FCSize(79, 29);
                button.visible = true;
                button.text = functions[i];
                button.font = "Default,12";
                button.viewName = "Function";
                addView(button, paintChart);
                iLeft += 80;
            }
        }

        /*
        * 黑色风格
        */
        let toBlack_Chart = function () {
            chart.paint.defaultUIStyle = "dark";
            chart.backColor = "rgb(0,0,0)";
            chart.borderColor = "rgb(100,100,100)";
            chart.textColor = "rgb(255,255,255)";
            chart.scaleColor = "rgb(100,100,100)";
            chart.crossTipColor = "rgb(50,50,50)";
            chart.crossLineColor = "rgb(100,100,100)";
            chart.gridColor = "rgba(100,100,100,125)";
            chart.indicatorColors = new Array();
            chart.indicatorColors.push("rgb(255,255,255)");
            chart.indicatorColors.push("rgb(255,255,0)");
            chart.indicatorColors.push("rgb(255,0,255)");
            chart.indicatorColors.push("rgb(255,0,0)");
            chart.indicatorColors.push("rgb(0,255,255)");
            chart.indicatorColors.push("rgb(0,255,0)");
            chart.indicatorColors.push("rgb(255,255,0)");
            chart.indicatorColors.push("rgb(255,255,255)");
            for (let i = 0; i < chart.plots.length; i++) {
                let plot = chart.plots[i];
                plot.lineColor = "rgb(255,255,255)";
                plot.pointColor = "rgba(255,255,255,125)";
            }
        };

        /*
        * 白色风格
        */
        let toWhite_Chart = function () {
            chart.paint.defaultUIStyle = "light";
            chart.backColor = "rgb(255,255,255)";
            chart.borderColor = "rgb(150,150,150)";
            chart.textColor = "rgb(0,0,0)";
            chart.scaleColor = "rgb(0,0,0)";
            chart.crossTipColor = "rgb(220,220,220)";
            chart.crossLineColor = "rgb(100,100,100)";
            chart.gridColor = "rgba(0,0,0,125)";
            chart.indicatorColors = new Array();
            chart.indicatorColors.push("rgb(100,100,100)");
            chart.indicatorColors.push("rgb(206,147,27)");
            chart.indicatorColors.push("rgb(150,0,150)");
            chart.indicatorColors.push("rgb(255,0,0)");
            chart.indicatorColors.push("rgb(0,150,150)");
            chart.indicatorColors.push("rgb(0,150,0)");
            chart.indicatorColors.push("rgb(59,174,218)");
            chart.indicatorColors.push("rgb(50,50,50)");
            for (let i = 0; i < chart.plots.length; i++) {
                let plot = chart.plots[i];
                plot.lineColor = "rgb(0,0,0)";
                plot.pointColor = "rgba(0,0,0,125)";
            }
        };

        if (chart.paint.defaultUIStyle == "dark") {
            toBlack_Chart();
        } else if (chart.paint.defaultUIStyle == "light") {
            toWhite_Chart();
        }

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        paintChart.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
            if (view.viewName == "Indicator") {
                if (view.text == "BOLL" || view.text == "MA") {
                    chart.mainIndicator = view.text;
                } else {
                    chart.showIndicator = view.text;
                }
                calcChartIndicator(chart);
                invalidateView(chart);
            } else if (view.viewName == "Plot") {
                chart.addingPlot = view.tag;
            } else if (view.viewName == "Function") {
                if (view.text == "白色") {
                    toWhite_Chart();
                    invalidateView(chart);
                } else if (view.text == "黑色") {
                    toBlack_Chart();
                    invalidateView(chart);
                } else if (view.text == "标准坐标") {
                    chart.vScaleType = "standard";
                    invalidateView(chart);
                } else if (view.text == "对数坐标") {
                    chart.vScaleType = "log10";
                    invalidateView(chart);
                } else if (view.text == "1分钟线") {
                    chart.cycle = "minute";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    queryHistoryData();
                } else if (view.text == "日线") {
                    chart.cycle = "day";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    queryHistoryData();
                } else if (view.text == "分时线") {
                    chart.cycle = "trend";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    queryHistoryData();
                }
                else if (view.text == "秒线") {
                    chart.cycle = "second";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    chart.crossStopIndex = -1;
                    chart.plots = new Array();
                    chart.sPlot = null;
                    chart.selectShape = "";
                    chart.selectShapeEx = "";
                    chart.data = null;
                    chart.autoFillHScale = false;
                    chart.hScalePixel = 11;
                    invalidateView(chart);
                    queryRuntimeData();
                }
                else if (view.text == "TICK图") {
                    chart.cycle = "tick";
                    requareTimes_Chart = 0;
                    lastDate_Chart = "";
                    chart.crossStopIndex = -1;
                    chart.plots = new Array();
                    chart.sPlot = null;
                    chart.selectShape = "";
                    chart.selectShapeEx = "";
                    chart.data = null;
                    chart.autoFillHScale = false;
                    chart.hScalePixel = 11;
                    invalidateView(chart);
                    queryRuntimeData();
                }
                else if (view.text == "清除画线") {
                    chart.plots = new Array();
                    chart.sPlot = null;
                    invalidateView(chart);
                } else if (view.text == "切换到最近") {
                    chart.lastVisibleIndex = chart.data.length;
                    checkChartLastVisibleIndex(chart);
                    resetChartVisibleRecord(chart);
                    calculateChartMaxMin(chart);
                    invalidateView(chart);
                }
            }
        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        paintChart.onMouseDown = function (view, mp, buttons, clicks, delta) {
            if (view.viewType == "chart") {
                if (!view.data || view.data.length == 0) {
                    return;
                }
                if (view.addingPlot.length > 0) {
                    addPlotDefault(view, true, mp, false, mp);
                    view.addingPlot = "";
                    invalidateView(chart);
                } else {
                    touchDownChart(view, true, mp, false, mp);
                    invalidateView(chart);
                }
            }else{
                onMouseDownDefault(view, mp, buttons, clicks, delta);
            }
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        paintChart.onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            if (view.viewType == "chart") {
                if (!view.data || view.data.length == 0) {
                    return;
                }
                if (view.addingPlot.length > 0) {
                    addPlotDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
                    view.addingPlot = "";
                    invalidateView(chart);
                } else {
                    touchDownChart(view, firstTouch, firstPoint, secondTouch, secondPoint);
                    invalidateView(chart);
                }
            }else{
                onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
            }
        };

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasChart.width = window.innerWidth;
            canvasChart.height = window.innerHeight;
            scaleCanvas(paintChart);
            canvasSizeChart = new FCSize((canvasChart.width / paintChart.ratio / paintChart.scaleFactorX), (canvasChart.height / paintChart.ratio / paintChart.scaleFactorY));
            chart.size = new FCSize(canvasSizeChart.cx, canvasSizeChart.cy);
            for (let i = 0; i < paintChart.views.length; i++) {
                if (paintChart.views[i].viewType != "chart") {
                    paintChart.views[i].visible = false;
                }
            }
            resetChartVisibleRecord(chart);
            checkChartLastVisibleIndex(chart);
            calculateChartMaxMin(chart);
            invalidate(paintChart);
        };


        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();

        };


        //已请求次数
        let requareTimes_Chart = 0;
        //最新数据的日期
        let lastDate_Chart = "";

        //测试第四个层
        let testDiv4 = function () {
            chart.candleDivPercent = 0.3;
            chart.volDivPercent = 0.2;
            chart.indDivPercent = 0.25;
            chart.indDivPercent2 = 0.25;
            line1 = new BaseShape();
            line1.color = "rgb(255,0,0)";
            line1.divIndex = 3;
            line1.shapeName = "line1";
            line1.title = "A";
            line2 = new BaseShape();
            line2.color = "rgb(0,255,0)";
            line2.color2 = "rgb(255,255,0)";
            line2.divIndex = 3;
            line2.shapeName = "line2";
            line2.title = "B";
            line2.title2 = "C";
            line2.shapeType = "bar";
            chart.shapes.push(line1);
            chart.shapes.push(line2);
            for (let i = 0; i < chart.data.length; i++) {
                line1.datas.push(chart.data[i].close);
                line2.datas.push(chart.data[i].high);
                line2.datas2.push(chart.data[i].low);
            }
        };
        let sUrl = "http://110.42.188.197:9968/quote?func=getkline&code=601857.SH&cycle=1440&count=1000";
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", sUrl, true);
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                let result = xmlhttp.responseText;
                let strs = result.split("\r\n");
                let dataList = new Array();
                for(let i = 2; i < strs.length; i++){
                    let subStrs = strs[i].split(",");
                    if(subStrs.length >= 7){
                        let data = new SecurityData();
                        let date = new Date(subStrs[0]);
                        data.open = parseFloat(subStrs[1]);
                        data.high = parseFloat(subStrs[2]);
                        data.low = parseFloat(subStrs[3]);
                        data.close = parseFloat(subStrs[4]);
                        data.volume = parseFloat(subStrs[5]);
                        data.date = date.getTime();
                        dataList.push(data);
                    }
                }
                chart.data = dataList;
                resetChartVisibleRecord(chart);
                checkChartLastVisibleIndex(chart);
                calcChartIndicator(chart);
                invalidate(paintChart);
            }
        };
        xmlhttp.send(null);    
    </script>

    <script>
        /*
        * 检查弹幕
        */
        let checkBarrage = function () {
            let paint = false;
            if (chart.views) {
                for (let i = 0; i < chart.views.length; i++) {
                    let view = chart.views[i];
                    if (view.viewType == "barrage") {
                        paint = true;
                        view.location.x = view.location.x - 5;
                        if (view.location.x + view.size.cx < 0) {
                            chart.views.splice(i, 1);
                            break;
                        }
                    }
                }
            }
            if (paint) {
                invalidateView(chart);
            }
        };

        setInterval(checkBarrage, 50);

        /*
        * 发送弹幕
        */
        let sendBarrage = function () {
            let text = document.getElementById('txtBarrage').value;
            if (text.length > 0) {
                let barrage = new FCView;
                barrage.backColor = null;
                barrage.textColor = "rgb(255,255,255)";
                barrage.borderColor = null;
                barrage.location = new FCPoint(chart.size.cx, 50 + Math.random() * (chart.size.cy - 100));
                barrage.size = paintChart.textSize(text, "Default,16");
                barrage.visible = true;
                barrage.text = text;
                barrage.font = "Default,16";
                barrage.viewType = "barrage";
                if (!chart.views) {
                    chart.views = new Array();
                }
                chart.views.push(barrage);
            }
        };
    </script>
    <br />
    <br />
    <br />
</body>
</html>
